<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { addArticle, articleDetails, delArticle, editArticle, getArticleList, getCategoryList } from '@/views/articles/getArticle';
import type { UploadProps } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
// 上传图片
const imageUrl = ref('');
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!');
        return false;
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!');
        return false;
    }
    return true;
};
// 显示隐藏

// 编辑文章

const formInline = ref({
    id: null,
    content: '',
    title: '',
    titlePicture: '',
    categoryId: '',
    weight: ''

});

// 选项绑定值
const value = ref('');
//分类
const CategoryList = ref([]);
getCategoryList().then(res => {
    console.log(res);
    CategoryList.value = res.rows;
});

//搜索
const getDetail = ref('');
const searchParams = reactive({
    pageNum: 1,
    pageSize: 10,
    title: ''
});

function search() {
    getArticleList(searchParams).then(res => {
        console.log(res);
        total.value = res.total;
        tableData.value = res.rows;
        getDetail.value = res.rows.id;
    });
}

//重置
function reset() {
    searchParams.title = '';
    search();
}

//初始化
search();
// 详情
const detail = ref({});
const detVisible = ref(false);

function ondetails(data) {
    detVisible.value = true;
    console.log(data);
    articleDetails(data.id).then(res => {
        console.log(res.data);
        detail.value = res.data;
    });
}

// 添加文章
const addVisible = ref(false);

function addBtn() {
    addVisible.value = true;
}

const addData = ref(
    {
        title: '',//文章标题
        titlePicture: '',//封面图片Url
        categoryId: '',//分类id
        content: '',//文本内富文本
        weight: 0,//权重
        sendTime: ''
    }
);
// 添加确认
const addSave = () => {
    ElMessage({
        message: '保存成功',
        type: 'success'
    });
    addArticle(addData.value).then(res => {
        console.log(res);
        search();
        addData.value.title = '';
        addData.value.titlePicture = '';
        addData.value.content = '<p><br/></p>';
        addData.value.categoryId = '';
        addData.value.sendTime = '';
    });
    addVisible.value = false;

};


const editVisible = ref(false);

// 编辑保存按钮
function editor(data) {
    console.log(data);
    editVisible.value = true;
    formInline.value = {
        id: data.id,
        content: data.content,
        title: data.title,
        titlePicture: data.titlePicture,
        categoryId: data.categoryId,
        weight: data.weight
    };
}

function editorSave() {
    editArticle(formInline.value).then(res => {
        console.log(res);
        // 重新请求列表
        search();
    });
    editVisible.value = false;
}

// 删除
const del = (data) => {
    ElMessageBox.confirm(
        '此操作将永久删除该文章, 是否继续?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            delArticle(data.id).then(res => {
                search();
            });
            ElMessage({
                type: 'success',
                message: '已删除'
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除'
            });
        });
};

// 表格
const tableData = ref([]);

// 分页
const total = ref(0);

</script>

<template>
    <div class='container'>
        <header>
            <!--    输入框-->
            <div class='left'>
                <span><b>文章名称</b></span>
                <el-input v-model='searchParams.title' placeholder='文章名称' clearable />
            </div>
            <div class='right'>
                <el-button @click='reset'>重置</el-button>
                <el-button v-hasPermi="['articles:query']" type='primary' @click='search'>搜索</el-button>
            </div>
        </header>
        <!--添加-->
        <div class='addbtn'>
            <el-button v-hasPermi="['articles:add']" type='primary' @click='addBtn'>添加</el-button>
        </div>
        <!--添加对话框-->
        <el-dialog v-model='addVisible' title='添加文章' width='1000' align='center'>
            <!--内容-->

            <div class='addTitle'>
                <span><b>文章名称</b></span>
                <el-input v-model='addData.title' placeholder='请输入标题名称' clearable />
            </div>
            <div class='faceImage'>
                <span style='margin: 0 15px 16px 9px'><b>封面图片</b></span>

                <el-upload
                    v-model='addData.titlePicture'
                    style='border: 1px solid #ccc; margin-left: -10px'
                    class='avatar-uploader'
                    action='http://127.0.0.1:4523/m2/3433588-0-default/117480740'
                    :show-file-list='false'
                    :on-success='handleAvatarSuccess'
                    :before-upload='beforeAvatarUpload'
                >
                    <img v-if='imageUrl' :src='imageUrl' class='avatar' />
                    <el-icon v-else class='avatar-uploader-icon'>
                        <Plus />
                    </el-icon>
                </el-upload>
                <!--            v-model='value'-->

                <div class='selectBox'>
                    <span class='articleSelect'>
                <b>选择文章栏目</b>
                </span>
                    <!--            @click='selectSearch(item.deptId)'-->

                    <el-select
                        filterable
                        v-model='value'
                        placeholder='学院名称'
                        style='width: 240px'

                    >
                        <el-option
                            v-for='item in CategoryList'
                            :key='item.id'
                            :value='item.name'
                        />
                    </el-select>
                    <div>
                        <span class='articleSelect' style='margin:0 20px 20px 100px!important;'><b>选择日期</b></span>

                        <el-date-picker
                            v-model='addData.sendTime'
                            type='datetime'
                            format='YYYY-MM-DD HH:mm'
                            value-format='YYYY-MM-DD HH:mm'
                            placeholder='选择发送日期'
                        />
                    </div>
                </div>


            </div>

            <div class='content'>
                <span><b>文章内容</b></span>
                <Editor v-model='addData.content' style='width: 100%'></Editor>
                <!--                    v-model='contentTitle'-->
            </div>
            <!--底部-->
            <template #footer>
                <div class='dialog-footer' align='center'>
                    <el-button @click='addVisible = false'>取消</el-button>
                    <el-button type='primary' @click='addSave'>
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!--表格-->
        <!--        <div id='table'>-->
        <el-table :data='tableData' border style='width: 100%'>
            <el-table-column fixed prop='date' type='index' label='序号' width='200' align='center' />
            <el-table-column prop='title' label='文章名称' align='center' />
            <el-table-column prop='author' label='发布人' width='200' align='center' />
            <el-table-column prop='sendTime' label='创建时间' width='300' align='center' />
            <el-table-column fixed='right' label='操作' width='200' align='center'>
                <template #default='scope'>
                    <el-button v-hasPermi="['articles:edit']" link type='primary' size='small' @click='ondetails(scope.row)'>详情</el-button>
                    <el-button v-hasPermi="['articles:detail']" link type='primary' size='small' @click='editor(scope.row)'>编辑</el-button>
                    <el-button v-hasPermi="['articles:remove']" link type='primary' size='small' @click='del(scope.row)'>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--详情对话框-->
        <el-dialog v-model='detVisible' title='文章详情' width='1000' align='center'>
            <!--内容-->
            <!--文章标题-->
            <div class='articleTitle'>
                {{ detail.title }}
            </div>
            <!--文章内容-->
            <div class='detailContent'>
                <div class='background' v-html='detail.content'>
                </div>
            </div>
            <!--底部-->
            <template #footer>
                <div class='dialog-footer' align='center'>
                    <el-button @click='detVisible = false'>取消</el-button>
                    <el-button type='primary' @click='detVisible = false'>
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--编辑对话框-->
        <el-dialog v-model='editVisible' title='编辑文章' width='1000' align='center'>
            <!--内容-->
            <div class='addTitle'>
                <span><b>文章名称</b></span>
                <el-input v-model='formInline.title' placeholder='请输入标题名称' clearable />
            </div>
            <div class='faceImage'>
                <span style='margin: 0 20px 0 8px'><b>封面图片</b></span>
                <el-upload
                    style='border: 1px solid #ccc; margin-left: -10px'
                    class='avatar-uploader'
                    action='http://127.0.0.1:4523/m2/3433588-0-default/117480740'
                    :show-file-list='false'
                    :on-success='handleAvatarSuccess'
                    :before-upload='beforeAvatarUpload'
                >
                    <img v-if='imageUrl' :src='imageUrl' class='avatar' alt='' />
                    <el-icon v-else class='avatar-uploader-icon'>
                        <Plus />
                    </el-icon>
                </el-upload>
                <!--            v-model='value'-->

                <div class='selectBox'>
                    <span class='articleSelect'>
                <b>选择文章栏目</b>
                </span>
                    <!--            @click='selectSearch(item.deptId)'-->
                    <el-select
                        filterable
                        v-model='value'
                        placeholder='学院名称'
                        style='width: 240px'
                    >
                        <el-option
                            v-for='item in CategoryList'
                            :key='item.id'
                            :value='item.name'
                        />
                    </el-select>
                    <div>
                        <span class='articleSelect' style='margin:0 20px 20px 100px!important;'><b>选择日期</b></span>

                        <el-date-picker
                            v-model='addData.sendTime'
                            type='datetime'
                            format='YYYY-MM-DD HH:mm'
                            value-format='YYYY-MM-DD HH:mm'
                            placeholder='选择发送日期'
                        />
                    </div>
                </div>


            </div>
            <div class='content'>
                <span><b>文章内容</b></span>
                <Editor v-model='formInline.content' style='width: 100%'></Editor>
            </div>
            <!--底部-->
            <template #footer>
                <div class='dialog-footer' align='center'>
                    <el-button @click='editVisible = false'>取消</el-button>
                    <el-button type='primary' @click='editorSave'>
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <!--分页-->
    <div id='page'>
        <el-pagination
            v-model:current-page='searchParams.pageNum'
            v-model:page-size='searchParams.pageSize'
            background
            layout='prev, pager, next'
            :total=total
            @currentChange='search'
        />
    </div>

</template>
<style lang='scss'>
.el-date-editor {
    width: 300px !important;
}

.selectBox {
    display: flex;
    flex-wrap: wrap;
}

.ql-toolbar span {
    margin: 0 !important;

}

.ql-formats:nth-of-type(1) {
    width: 120px !important;
}

.ql-formats:nth-of-type(2) {
    width: 60px !important;
}

.ql-formats:nth-of-type(3) {
    width: 60px !important;
}

.ql-formats:nth-of-type(4) {
    width: 60px !important;
}

.ql-formats:nth-of-type(5) {
    width: 60px !important;
}

.ql-picker {
    width: 65px !important;
}

.ql-formats:nth-of-type(6) {
    width: 60px !important;
}

.ql-formats:nth-of-type(7) {
    width: 60px !important;
}

.ql-formats:nth-of-type(8) {
    width: 60px !important;
}

.ql-formats:nth-of-type(9) {
    width: 35px !important;
}

.articleSelect {
    margin-left: 80px !important;
}

.el-input__wrapper span {
    width: 20px !important;
}

.el-dialog span {
    width: 100px;
}

.is-link {
    width: 20px;

    span {
        font-size: 13px;
    }
}

.el-button--default {
    width: 60px;
}

.el-dialog__footer {
    padding-top: 50px;
}

header.el-dialog__header {
    background-color: #1892FF;

    span {
        color: white
    }

    svg {
        color: white
    }
}

.addbtn {
    margin: 20px 0;
}

.demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.detailContent {
    color: black;
    //font-size: 30px;

}

p {
    margin-bottom: 10px;
}

.articleTitle {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: black;

}

.background {
    width: 100%;
    background-color: #FAFAFA;
    padding: 20px;

}

.faceImage {
    margin: 20px 0;
    display: flex;
    line-height: 40px;
}

.content {
    display: flex;
    margin-bottom: 40px;
}

.addTitle,
.left {
    display: flex;
    justify-content: space-between;
    line-height: 40px;

}

header span {
    display: inline-block;
    font-size: 15px;
    width: 110px;
    line-height: 32px;
}

.el-dialog span {

}

.el-form-item {
    display: flex;
    //line-height: 32px;
}

#table {
    margin: 20px 0;
}

#page {
    display: flex;
    justify-content: right;
    margin: 0 40px 20px;
}

.container {
    padding: 20px;
}

header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
